import React from 'react';

// 导入组件
import { Flex } from 'antd-mobile';

// 导入 withRouter 高阶组件
import { withRouter } from 'react-router-dom'

import PropTypes from 'prop-types'

// 导入样式
import './index.scss'

class SearchHeader extends React.Component {

    //  事件处理区域

    // 视图渲染区域
    render() {
        return (
            <Flex className={['search-box', this.props.className || ''].join(' ')}>
                {/* 左侧白色区域 */}
                <Flex className="search">
                    {/* 位置 */}
                    <div className="location" onClick={() => this.props.history.push('/citylist')}>
                        <span className="name">{this.props.cityName}</span>
                        <i className="iconfont icon-arrow" />
                    </div>

                    {/* 搜索表单 */}
                    <div className="form" onClick={() => this.props.history.push('/search')}>
                        <i className="iconfont icon-seach" />
                        <span className="text">请输入小区或地址</span>
                    </div>
                </Flex>
                {/* 右侧地图图标 */}
                <i className="iconfont icon-map" onClick={() => this.props.history.push('/map')} />
            </Flex>
        )
    }
}

// 添加props校验
SearchHeader.propTypes = {
    cityName: PropTypes.string.isRequired,
    className: PropTypes.string
}

export default withRouter(SearchHeader)